<template>
    <div class='fxn-header'>
        <div class="logo" @click="handlePath(1)">
            <img src="@/static/img/head-logo.svg" alt="">
            律所管理系统
        </div>
        <!-- Logo End -->
        <div class="menu">
            <div class="item fxn-ft-24 fxn-cursor">
                <i class="iconfont icon-refresh" v-loading.fullscreen.lock="fullscreenLoading" @click="handleRefresh"></i>
            </div>
            <div class="item fxn-ft-24 fxn-cursor">
                <i :class="['iconfont',isFullFlag ? 'icon-computer_fill' : 'icon-computer']" @click="handleFull"></i>
            </div>
            <!-- <div class="item">
                <div class="message" @click="handlePath(2)"><i class="iconfont icon-remind"></i></div>
            </div> -->
            <div class="item">
                <el-dropdown>
                    <span class="user el-dropdown-link">{{forgetUser(userInfo.real_name)}}</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="editDialog = true">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="handleExit">退出账户</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <!-- Menu End -->

        <!-- 修改密码 -->
        <el-dialog v-model="editDialog" title="修改密码" :before-close="handleClose" width="600">
            <el-form :model="editForm" ref="editRef" :rules="editRules" label-width="120px">
                <el-form-item label="旧密码" prop="password">
                    <el-input type="password" maxlength="18" v-model="editForm.password" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password_new">
                    <el-input type="password" maxlength="18" v-model="editForm.password_new" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repassword_new">
                    <el-input type="password" maxlength="18" v-model="editForm.repassword_new" placeholder="请输入确认密码"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="handleSubmit">确认</el-button>
            </template>
        </el-dialog>
        <!-- 修改密码 End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    import { ElLoading } from "element-plus";
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            const RePw = (rule,value,callback) => {
                if(!value) {
                    callback( new Error('请输入确认密码') );
                } else if (value !== state.editForm.password_new) {
                    callback(new Error('两次输入密码不一致!'));
                } else{
                    callback();
                }
            }

            //初始化数据
            const state = reactive({
                userInfo: JSON.parse(localStorage.getItem('member_info')),

                //修改密码
                btnLoading: false,
                editDialog: false,
                editRef: '',
                editForm: {
                    password: '',
                    password_new: '',
                    repassword_new: '',
                },
                editRules: {
                    password: [
                        { required: true, message: '请输入旧密码', trigger: 'blur'},
                        { min: 6, max: 18, message: "长度在 6-18 个字符以内", trigger: "blur" },
                    ],
                    password_new: [
                        { required: true, message: '请输入新密码', trigger: 'blur'},
                        { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/, message: '密码必须由6-18位数字加字母组成'}
                    ],
                    repassword_new: [
                        { required: true, validator: RePw, trigger: "blur" },
                    ],
                },

                //是否全屏
                isFullFlag: false,

                //刷新加载
                fullscreenLoading: false,
            })

            //提交修改密码
            const handleSubmit = () =>{
                state.editRef.validate((valid) => {
                    if(valid){
                        proxy.$http.post('/index/index/changePassword', state.editForm)
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error( msg);
                            }else{
                                state.editDialog = false;
                                proxy.$refs.editRef.resetFields();
                                proxy.$msg.success('修改成功!请牢记你的新密码!即将退出登录...');
                                localStorage.clear();
                                location.href = '/';
                            }
                        })
                    }
                })
            }

            //关闭修改密码
            const handleClose = () =>{
                proxy.$refs.editRef.resetFields(); 
                state.editDialog = false;
            }

            //返回首页
            const handlePath = (type) =>{
                if(type == 1){
                    router.push('/Index');
                }else{
                    router.push('/MessageManage');
                }
            }

            //退出
            const handleExit = () => {
                proxy.$http.post('/index/Login/logout')
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error( msg);
                    }else{
                        proxy.$msg.success( '退出登录!');
                        localStorage.clear();
                        sessionStorage.clear();
                        router.push('/');
                    }
                })
            }

            //刷新
            const handleRefresh = () => {
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                setTimeout(() => {
                    loading.close();
                    window.location.reload();
                }, 3000)
            }

            //全屏
            const handleFull = () => {
                //指定全屏区域元素
                let element = document.documentElement;
                
                // 判断是否已经是全屏 如果是全屏，退出
                if (state.isFullFlag) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    // 否则，进入全屏
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                state.isFullFlag =!state.isFullFlag
            }

            //格式化用户头像
            const forgetUser = (key) => {
                let user = key.charAt(0);
                return user.toUpperCase();
            }

            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handlePath,
                handleExit,
                handleSubmit,
                handleClose,
                handleRefresh,
                handleFull,
                
                //组件方法
                forgetUser,
            }

        },
    })
</script>

<style scoped>
    .fxn-header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 68px;
        background: #FFFFFF;
        z-index: 9;
    }

    .fxn-header .logo{
        float: left;
        width: 230px;
        color: #FFFFFF;
        font-size: .8rem;
        text-align: center;
        line-height: 68px;
        cursor: pointer;
        vertical-align: middle;
        background: #0f133f;
    }

    .fxn-header .logo img{
        height: 1.8rem;
    }

    .fxn-header .menu{
        float: right;
        margin-right: 20px;
    }

    .fxn-header .menu .item{
        float: left;
        padding: 0 8px;
        line-height: 68px;
    }

    .fxn-header .menu .item .message{
        font-size: 24px;
        cursor: pointer;
    }

    .fxn-header .menu .item:hover .iconfont{
        color: #5051F9;
    }

    .fxn-header .menu .item .user{
        margin-top: 18px;
        width: 32px;
        height: 32px;
        color: #FFFFFF;
        text-align: center;
        line-height: 32px;
        border-radius: 50%;
        cursor: pointer;
        background: #222653;
    }
</style>